<template>
  <Header>
    <Menu

      mode="horizontal"
      @on-select="navigateTo"
      theme="dark"
      active-name="1"
    >
      <div class="layout-logo"></div>
      <div class="layout-nav" v-for="(item, index) in menuItems" :key="index">
        <MenuItem :name="item.name">
          <Icon :type="item.icon"></Icon>
          {{ item.value }}
        </MenuItem>
      </div>
    </Menu>
  </Header>
</template>

<script>
export default {
  name: "NavHeader",
  data() {
    return {
      menuItems: [
        { name: "home", value: "css", icon: "ios-paper" },
        { name: "about", value: "Javascript", icon: "ios-people" },
        { name: "id", value: "Html", icon: "ios-stats" }
      ]
    };
  },
  methods: {
    navigateTo(name) {
      this.$router.push({
        name: name
      });
    }
  }
};
</script>

<style scoped>
  .nav-menu {
    height: 60px;
  }
</style>
